<template>
  <div style="display:inline-block">
    <el-dialog title="地点选择" :visible.sync="show" width="840px" :modal="true" :close-on-click-modal="false"
      append-to-body>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="地图标记" name="ch">
          <map-marker width="800" height="600" :lat="lat" :lng="lng" @change="markerChange" />
        </el-tab-pane>
        <el-tab-pane label="自定义" name="abroad">
          <el-form label-width="100px" size="small" :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="经度(LNG)" prop="longitude">
              <div style="display: flex;align-items: center;">
                <el-input v-model="ruleForm.longitude" placeholder="请输入经度" style="width: 260px;"
                  type="number"></el-input>
                <infoTip style="margin-left: 10px;" tipText="请输入经度。例如：123.23"></infoTip>
              </div>
            </el-form-item>
            <el-form-item label="纬度(LAT)" prop="latitude">
              <div style="display: flex;align-items: center;">
                <el-input v-model="ruleForm.latitude" placeholder="请输入纬度" style="width: 260px;"
                  type="number"></el-input>
                <infoTip style="margin-left: 10px;" tipText="请输入纬度。例如：34.23"></infoTip>
              </div>
            </el-form-item>

            <el-form-item>
              <div style="display: flex;align-items: center;">
                <div>经纬度查询网址：</div>
                <a href="http://jingweidu.757dy.com/" target="_blank" class="clickable-link">网站一</a>
                <a href="https://jingweidu.bmcx.com/" target="_blank" class="clickable-link">网站二</a>
                <a href="https://map.jiqrxx.com/jingweidu/" target="_blank" class="clickable-link">网站三</a>
              </div>

            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>


      <div slot="footer" class="">
        <el-button type="default" size="mini" @click="cancleHandle">取消</el-button>
        <el-button type="primary" size="mini" @click="submitHandle">确定</el-button>
      </div>
    </el-dialog>
    <el-button type="text" size="mini" icon="el-icon-place" @click="openDialogHandle">设置</el-button>
  </div>
</template>

<script>
import MapMarker from "@/components/MapMarker";
import { getMyconfigs } from "@/api/weapp";

export default {
  components: {
    MapMarker,
  },
  props: {
    lat: { type: Number, default: null },
    lng: { type: Number, default: null },
  },
  data() {
    return {
      show: false,
      marker: null,
      activeName: 'ch',
      jwd: '',
      ruleForm: {
        longitude: '',
        latitude: ''
      },
      rules: {
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' },
          { validator: this.validateLongitude, trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' },
          { validator: this.validateLatitude, trigger: 'blur' }
        ]
      }
    };
  },

  watch: {
    ruleForm: {
      handler(newValue, oldValue) {
        this.marker = { lng: newValue.longitude, lat: newValue.latitude };
      },
      deep: true
    },
    show(val) {
      if (val) {
        if (!this.lat || !this.lng) {
          this.ruleForm.longitude = null,
            this.ruleForm.latitude = null
          return
        }
        this.ruleForm.longitude = this.lng,
          this.ruleForm.latitude = this.lat
      }
    },
  },

  mounted() { },
  methods: {
    validateLongitude(rule, value, callback) {
      const longitude = parseFloat(value);
      if (!value) {
        return callback(new Error('请输入经度'));
      }
      if (isNaN(longitude) || longitude < -180 || longitude > 180) {
        return callback(new Error('经度必须在 -180 到 180 之间'));
      }
      callback();
    },
    validateLatitude(rule, value, callback) {
      const latitude = parseFloat(value);
      if (!value) {
        return callback(new Error('请输入纬度'));
      }
      if (isNaN(latitude) || latitude < -90 || latitude > 90) {
        return callback(new Error('纬度必须在 -90 到 90 之间'));
      }
      callback();
    },
    loadConfig: function () {
      this.loading = true;
      this.$store.dispatch("myconfig/loadMyconfig").then((resp) => {
        this.loading = false;
      });
    },
    markerChange: function (marker) {
      if (!marker) {
        return false;
      }
      this.marker = marker;
    },
    openDialogHandle() {
      this.show = true;
      this.loadConfig();
    },
    cancleHandle() {
      this.show = false;
    },
    submitHandle() {
      this.show = false;
      var marker = this.marker;
      this.$emit("change", marker);
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
  },
};
</script>

<style scoped>
.actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.clickable-link {
  text-decoration: underline;
  /* 添加下划线 */
  color: #0066cc;
  /* 设置链接颜色 */
  cursor: pointer;
  /* 鼠标悬停时显示手形光标 */
  margin-right: 10px;
}

.clickable-link:hover {
  text-decoration: underline;
  /* 鼠标悬停时下划线更明显 */
  color: #0056b3;
  /* 鼠标悬停时颜色变深 */
}
</style>